﻿@inherits Blazorise.Carousel
<CascadingValue Value="@this" IsFixed>
    <CascadingValue Value="@State">
        @ChildContent

        <div @ref="@ElementRef" id="@ElementId" class="@ClassNames" style="@StyleNames" data-carousel="static" @attributes="@Attributes">
            <div class="@SlidesClassNames">
                @for ( int i = 0; i < carouselSlides.Count; ++i )
                {
                    int index = i;
                    <div class="@carouselSlides[index].ClassNames" style="@carouselSlides[index].StyleNames" data-carousel-item="@(carouselSlides[index].Active ? "true" : null)" @attributes="@carouselSlides[index].Attributes">
                        @carouselSlides[index].ChildContent
                    </div>
                }
            </div>

            @if ( ShowIndicators )
            {
                <div class="@IndicatorsClassNames">
                    @for ( int i = 0; i < carouselSlides.Count; ++i )
                    {
                        int index = i;
                        <button @onclick="@carouselSlides[index].Activate" class="@carouselSlides[index].IndicatorClassNames" style="@carouselSlides[index].IndicatorStyleNames" aria-current="@(carouselSlides[index].Active.ToString().ToLowerInvariant())"></button>
                    }
                </div>
            }

            @if ( ShowControls )
            {
                <button type="button" class="absolute top-0 left-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev @onclick="@SelectPrevious">
                    <span class="inline-flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                        <svg aria-hidden="true" class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                        <span class="sr-only">@PreviousButtonString</span>
                    </span>
                </button>
                <button type="button" class="absolute top-0 right-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next @onclick="@SelectNext">
                    <span class="inline-flex items-center justify-center w-8 h-8 rounded-full sm:w-10 sm:h-10 bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
                        <svg aria-hidden="true" class="w-5 h-5 text-white sm:w-6 sm:h-6 dark:text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        <span class="sr-only">@NextButtonString</span>
                    </span>
                </button>
            }
        </div>
    </CascadingValue>
</CascadingValue>